<template>
  <div class="home">
    <div style="width: 100%">
      <div class="row">
        <button class="copy-link-btn zfbg-btn" @click="copyBaogao(0)">
          转发报告
        </button>
        <div class="top_down">
          <li class="copybox" @click="copyBaogao(1)">{{ jichu_info.title }}</li>
        </div>
      </div>
      <div style="height: 100%">
        <div class="middle_Basic_information">
          <ul class="middle_Basic_information_top">
            <div
              :class="[
                'middle_Basic_information_top_info',
                isSelect == 1 ? 'selected' : '',
              ]"
              @click="change(1)"
            >
              基本信息
            </div>
            <div
              :class="[
                'middle_Basic_information_top_info',
                isSelect == 2 ? 'selected' : '',
              ]"
              @click="change(2)"
            >
              纳税信息
            </div>
            <div
              :class="[
                'middle_Basic_information_top_info',
                isSelect == 3 ? 'selected' : '',
              ]"
              @click="change(3)"
            >
              发票信息
            </div>
            <div
              :class="[
                'middle_Basic_information_top_info',
                isSelect == 4 ? 'selected' : '',
              ]"
              @click="change(4)"
            >
              供应商信息
            </div>
          </ul>
          <!-- 基本信息 -->
          <div class="middle_all" v-if="isSelect == 1">
            <ul
              class="middle_Basic_information_middle"
              style="margin-bottom: 10px"
            >
              <li>
                <span class="middle_Basic_information_middle_left"
                  >报告创建时间</span
                >
                <span class="middle_Basic_information_middle_right">
                  <p>{{ jichu_info.cjsj }}</p>
                </span>
              </li>
              <li>
                <span class="middle_Basic_information_middle_left"
                  >企业名称</span
                >
                <span class="middle_Basic_information_middle_right">
                  <p @click="copyBaogao(1)">
                    {{ jichu_info.title }}<em style="color: blue">复制</em>
                  </p>
                </span>
              </li>
              <li>
                <span class="middle_Basic_information_middle_left"
                  >当前法人姓名</span
                >
                <span class="middle_Basic_information_middle_right">
                  <p @click="copyBaogao(3)">
                    {{ jichu_info.frxm }}<em style="color: blue">复制</em>
                  </p>
                </span>
              </li>
              <li>
                <span class="middle_Basic_information_middle_left"
                  >法人年龄（岁）</span
                >
                <span class="middle_Basic_information_middle_right">
                  <p>{{ jichu_info.frnl }}</p>
                </span>
              </li>
              <li>
                <span class="middle_Basic_information_middle_left"
                  >法人占股比例</span
                >
                <span class="middle_Basic_information_middle_right">
                  <p>{{ jichu_info.frzgbl }}</p>
                </span>
              </li>
              <li>
                <span class="middle_Basic_information_middle_left"
                  >成立日期</span
                >
                <span class="middle_Basic_information_middle_right">
                  <p>{{ jichu_info.found_date }}</p>
                </span>
              </li>
              <li>
                <span class="middle_Basic_information_middle_left"
                  >统一信用代码</span
                >
                <span class="middle_Basic_information_middle_right">
                  <p @click="copyBaogao(2)">
                    {{ jichu_info.xydm }}
                    <em style="color: blue">复制 </em>
                  </p>
                </span>
              </li>
              <li>
                <span class="middle_Basic_information_middle_left"
                  >行业分类</span
                >
                <span class="middle_Basic_information_middle_right">
                  <p>{{ jichu_info.hyfl }}</p>
                </span>
              </li>
              <li>
                <span class="middle_Basic_information_middle_left"
                  >注册类型</span
                >
                <span class="middle_Basic_information_middle_right">
                  <p>{{ jichu_info.zclx }}</p>
                </span>
              </li>
              <li>
                <span class="middle_Basic_information_middle_left"
                  >注册区域</span
                >
                <span class="middle_Basic_information_middle_right">
                  <p>{{ jichu_info.zcqy }}</p>
                </span>
              </li>
            </ul>
            <li class="new_li">
              <br />
              <span
                class="middle_Basic_information_middle_left"
                style="font-weight: bold"
                >股东明细{{ this.gudong_list.length == 0 ? "：无" : "" }}</span
              >
            </li>
            <div class="tbdiv">
              <table
                class="middle_Basic_information_tb"
                v-if="!this.gudong_list.length == 0"
                style="width: 95%"
              >
                <thead>
                  <tr>
                    <th style="width: 30%">股东名称</th>
                    <th style="width: 30%">参股数额</th>
                    <th style="width: 30%">参股比例</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(item, index) in gudong_list"
                    :key="index"
                    :class="index % 2 == 1 ? 'odd' : ''"
                  >
                    <td>{{ item.name }}</td>
                    <td>{{ item.cgse }}</td>
                    <td>{{ item.cgbl }}</td>
                  </tr>
                  <tr
                    class="additional-row"
                    @click="gdmx_zksq_change()"
                    v-if="gudong_list_all.length > 3"
                  >
                    <td colspan="4">
                      <p style="color: blue">{{ gdmx_zksq }}</p>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- 法人/股东变更 -->
            <li class="new_li" v-if="!gudong_change_all.length == 0">
              <br />
              <span
                class="middle_Basic_information_middle_left"
                style="font-weight: bold"
                >法人/股东变更</span
              >
            </li>
            <div class="tbdiv" v-if="!gudong_change_all.length == 0">
              <table
                class="middle_Basic_information_tb"
                style="width: 95%; max-width: 100%; table-layout: fixed"
              >
                <thead>
                  <tr>
                    <th style="width: 20%">变更类型</th>
                    <th style="width: 18%">变更时间</th>
                    <th style="width: 35%">变更前</th>
                    <th style="width: 35%">变更后</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(item, index) in gudong_change"
                    :key="index"
                    :class="index % 2 == 1 ? 'odd' : ''"
                  >
                    <td>{{ item.bglx }}</td>
                    <td>{{ item.bgsj }}</td>
                    <td>{{ item.bgq }}</td>
                    <td>{{ item.bgh }}</td>
                  </tr>
                  <tr
                    class="additional-row"
                    @click="gdbg_zksq_change()"
                    v-if="gudong_change_all.length > 3"
                  >
                    <td colspan="4">
                      <p style="color: blue">{{ gdbg_zksq }}</p>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <li class="new_li">
              <br />
              <span
                class="middle_Basic_information_middle_left"
                style="font-weight: bold"
                >银税互动授权记录: 无</span
              >
            </li>
            <div class="bottom_img">
              <img src="../assets/gzg.jpg" alt="" />
            </div>
          </div>

          <!-- 纳税信息 -->
          <div class="middle_all" v-if="isSelect == 2">
            <div class="middle_Basic_information_middle_second">
              <li>
                <p>纳税信用等级</p>
                <span>{{ ns_info.xydj }}</span>
              </li>
              <li>
                <p>近12月增税销售额（元）</p>
                <span>{{ ns_info.zzxse_12 }}</span>
              </li>
              <li>
                <p>纳税人种类</p>
                <span>{{ ns_info.nsrzl }}</span>
              </li>
              <li>
                <p>近24月增税销售额（元）</p>
                <span>{{ ns_info.zzxse_24 }}</span>
              </li>
              <li>
                <p>近12月欠税记录次数</p>
                <span>{{ ns_info.qsjlcs_12 }}</span>
              </li>
              <li>
                <p>近12月纳税总额(元)</p>
                <span>{{ ns_info.nsze_12 }}</span>
              </li>
              <li>
                <p>当前欠税余额（元）</p>
                <span>{{ ns_info.dqqcje }}</span>
              </li>
              <li>
                <p>近24月纳税总额(元)</p>
                <span>{{ ns_info.nsze_24 }}</span>
              </li>
              <li>
                <p>近3个月滞纳金金额(元)</p>
                <span>{{ ns_info.yznjje_3 }}</span>
              </li>
              <li>
                <p>近12月增税应纳额(元)</p>
                <span>{{ ns_info.zsyne_12 }}</span>
              </li>
              <li>
                <p>近12个月滞纳金金额(元)</p>
                <span>{{ ns_info.znjje_12 }}</span>
              </li>
              <li>
                <p>近12月0申报月数(月)</p>
                <span>{{ ns_info.sbys_120 }}</span>
              </li>
              <li>
                <p>近12月滞纳金次数</p>
                <span>{{ ns_info.znjcs_12 }}</span>
              </li>
              <li>
                <p>近12月最长连续0纳税申报月数</p>
                <span>{{ ns_info.zclx0sbys_12 }}</span>
              </li>
              <li>
                <p>资产金额(去年年报)</p>
                <span>{{ ns_info.qnzcje }}</span>
              </li>
              <li>
                <p>负债率(去年年报)</p>
                <span>{{ ns_info.qnfzl }}</span>
              </li>
              <li>
                <p>利润额(去年年报)</p>
                <span>{{ ns_info.qnlre}}</span>
              </li>
              <li>
                <p>净利率(去年年报)</p>
                <span>{{ ns_info.qzjll }}</span>
              </li>
            </div>

            <li class="new_li">
              <br />
              <span
                class="middle_Basic_information_middle_left"
                style="font-weight: bold"
                >滞纳金情况{{ znj_list_all.length == 0 ? "：无" : "" }}</span
              >
            </li>
            <div class="tbdiv" v-if="!znj_list_all.length == 0">
              <table class="middle_Basic_information_tb" style="width: 95%">
                <thead>
                  <tr>
                    <th style="width: 40%">滞纳金时间</th>
                    <th style="width: 40%">滞纳金金额(元)</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(item, index) in znj_list"
                    :key="index"
                    :class="index % 2 == 1 ? 'odd' : ''"
                  >
                    <td>{{ item.znsj }}</td>
                    <td>{{ item.zhje }}</td>
                  </tr>
                  <tr
                    class="additional-row"
                    @click="znj_zksq_change()"
                    v-if="znj_list_all.length > 2"
                  >
                    <td colspan="4">
                      <p style="color: blue">{{ znj_zksq }}</p>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="tip" v-if="!znj_list_all.length == 0">
              税务逾期和滞纳金是企业注册地区税局记录生成的（如有记录，可自行登录当地电子税务局看到），我方无法修改，报告内容仅供参考，不能用于任何用途。
              <button class="view-detail-button" @click="znjModalchange()">
                查看详细路径
              </button>
            </div>

            <li class="new_li">
              <br />
              <span
                class="middle_Basic_information_middle_left"
                style="font-weight: bold"
                >税务处罚{{ swcf_list.length == 0 ? "：无" : "" }}</span
              >
            </li>
            <div class="tbdiv" v-if="!swcf_list.length == 0">
              <table class="middle_Basic_information_tb" style="width: 95%">
                <thead>
                  <tr>
                    <th style="width: 23%">登记日期</th>
                    <th style="width: 33%">违法违章信息</th>
                    <th style="width: 23%">状态</th>
                    <th style="width: 23%">详细信息</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(item, index) in swcf_list1"
                    :key="index"
                    :class="index % 2 == 1 ? 'odd' : ''"
                  >
                    <td>{{ item.djrq }}</td>
                    <td>{{ item.wfwzxx }}</td>
                    <td>{{ item.wfwzzt }}</td>
                    <td style="color: blue" @click="lookSwcf(item)">查看</td>
                  </tr>
                  <tr
                    class="additional-row"
                    @click="zksq()"
                    v-if="swcf_list.length > 2"
                  >
                    <td colspan="4">
                      <p style="color: blue">{{ swcf_zksq }}</p>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="tip" v-if="!swcf_list.length == 0">
              税务逾期记录可自行前往电子税务局-税务数字账户-账户查询-违法违章信息查询中将状态选为全部，即可查到对应记录。
              <button class="view-detail-button" @click="swcfModalChange()">
                查看详细路径
              </button>
            </div>

            <div>
              <p
                style="
                  font-size: 1.5rem;
                  margin-left: 2rem;
                  margin-top: 2rem;
                  margin-bottom: 2rem;
                "
              >
                近三年纳税信息完税表(元)
              </p>
              <div class="middle_all_divtb3">
                <table class="middle_all_3_tb">
                  <thead>
                    <tr class="odd">
                      <th style="width: 15rem">月份</th>
                      <th style="width: 15rem">2023</th>
                      <th style="width: 15rem">2024</th>
                      <th style="width: 15rem">2025</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="(item, index) in wsb_list.slice(0, 12)"
                      :key="index"
                      :class="index % 2 == 1 ? 'odd' : ''"
                    >
                      <td>{{ item.yf }}</td>
                      <td>{{ item.y2023 }}</td>
                      <td>{{ item.y2024 }}</td>
                      <td>{{ item.y2025 }}</td>
                    </tr>
                    <tr style="background-color: rgb(179, 219, 245)">
                      <td style="font-weight: bolder">{{ wsb_list[12].yf }}</td>
                      <td>{{ wsb_list[12].y2023 }}</td>
                      <td>{{ wsb_list[12].y2024 }}</td>
                      <td>{{ wsb_list[12].y2025 }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="bottom_img">
              <img src="../assets/gzg.jpg" alt="" />
            </div>
          </div>

          <!-- 发票信息 -->
          <div class="middle_all" v-if="isSelect == 3">
            <div class="middle_Basic_information_middle_second">
              <li>
                <p>近45日是否有开票记录</p>
                <span>{{ fp_info.kpjj_45 }}</span>
              </li>
              <li>
                <p>近一个月开票金额(元)</p>
                <span>{{ fp_info.kpje_1 }}</span>
              </li>
              <li>
                <p>近3个月开票环比增长率</p>
                <span>{{ fp_info.kphb_3 }}</span>
              </li>
              <li>
                <p>近3个月开票金额(元)</p>
                <span>{{ fp_info.kpje_3 }}</span>
              </li>
              <li>
                <p>近6个月开票环比增长率</p>
                <span>{{ fp_info.kphb_6 }}</span>
              </li>
              <li>
                <p>近6月开票金额(元)</p>
                <span>{{ fp_info.kpje_6 }}</span>
              </li>
              <li>
                <p>近12月开票环比增长率</p>
                <span>{{ fp_info.kphb_12 }}</span>
              </li>
              <li>
                <p>近12个月开票金额(元)</p>
                <span>{{ fp_info.kpje_12 }}</span>
              </li>
              <li>
                <p>近3个月下游客户统计</p>
                <span>{{ fp_info.xykh_3 }}</span>
              </li>
              <li>
                <p>近24个月开票金额(元)</p>
                <span>{{ fp_info.kpje_24 }}</span>
              </li>
              <li>
                <p>近12月下游客户数量(家)</p>
                <span>{{ fp_info.xykh_12 }}</span>
              </li>
              <li>
                <p>近12个月下游开票张数</p>
                <span>{{ fp_info.xykp_12 }}</span>
              </li>
              <li>
                <p>近12个月作废发票数量占比</p>
                <span>{{ fp_info.xykhzb_12 }}</span>
              </li>
              <li>
                <p>近12月月均开票金额增长率</p>
                <span>{{ fp_info.jkpzz_12 }}</span>
              </li>
              <li>
                <p>近12月红冲发票张数占比</p>
                <span>{{ fp_info.hcfpzb_12 }}</span>
              </li>
              <li>
                <p>近12个月红冲金额占比</p>
                <span>{{ fp_info.hcjezb_12 }}</span>
              </li>
              <li style="width: 100%">
                <p>近12个月最长连续断票月数</p>
                <span>{{ fp_info.zcdp_12 }}</span>
              </li>
              <li style="width: 100%">
                <p>近12个月断票月数(不含2月份)</p>
                <span>{{ fp_info.zcdpb2_12 }}</span>
              </li>
              <li style="width: 100%">
                <p>近12个月最大连续未开票间隔天数（销项）</p>
                <span>{{ fp_info.zcwkp_12 }}</span>
              </li>
            </div>

            <div>
              <p
                style="
                  font-size: 1.5rem;
                  margin-left: 2rem;
                  margin-top: 2rem;
                  margin-bottom: 2rem;
                "
              >
                近三年开票信息报表（元）
              </p>
              <div class="middle_all_divtb3">
                <table class="middle_all_3_tb">
                  <thead>
                    <tr class="odd">
                      <th style="width: 15rem">月份</th>
                      <th style="width: 15rem">2023</th>
                      <th style="width: 15rem">2024</th>
                      <th style="width: 15rem">2025</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="(item, index) in receipt_list.slice(0, 12)"
                      :key="index"
                      :class="index % 2 == 1 ? 'odd' : ''"
                    >
                      <td>{{ item.yf }}</td>
                      <td>{{ item.y2023 }}</td>
                      <td>{{ item.y2024 }}</td>
                      <td>{{ item.y2025 }}</td>
                    </tr>
                    <tr style="background-color: rgb(179, 219, 245)">
                      <td style="font-weight: bolder">年度汇总</td>
                      <td>{{ receipt_list[12].y2023 }}</td>
                      <td>{{ receipt_list[12].y2024 }}</td>
                      <td>{{ receipt_list[12].y2025 }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="bottom_img">
              <img src="../assets/gzg.jpg" alt="" />
            </div>
          </div>

          <!-- 供应商信息 -->
          <div class="middle_all_four" v-if="isSelect == 4">
            <!-- 公司前十 -->
            <div class="fonsi">
              <img src="../assets/kehu.png" alt="" />
            </div>
            <span class="middle_all_4_span"> 近一年前十供应商信息 </span>
            <div class="separator"></div>
            <div class="middle_all_divtb4" style="margin-top: 10px">
              <table class="middle_all_4_tb">
                <thead>
                  <tr class="odd">
                    <th style="width: 10%">排名</th>
                    <th style="width: 25%">供应商名称</th>
                    <th style="width: 20%">采购额(元)</th>
                    <th style="width: 15%">金额占比(%)</th>
                    <th style="width: 15%">是否关联方</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(item, index) in supplier_list"
                    :key="index"
                    :class="index % 2 == 1 ? 'odd' : ''"
                  >
                    <td>{{ item.pm }}</td>
                    <td>{{ item.gysmc }}</td>
                    <td>{{ item.cge }}</td>
                    <td style="color: rgb(255, 185, 78)">{{ item.jezb }}</td>
                    <td>{{ item.sfglf }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <br />
            <!-- 客户前十 -->
            <div class="fonsi">
              <img src="../assets/kehu.png" alt="" />
            </div>
            <span class="middle_all_4_span"> 近一年前十销售客户信息 </span>
            <div class="separator"></div>
            <div class="middle_all_divtb4" style="margin-top: 10px">
              <table class="middle_all_4_tb">
                <thead>
                  <tr class="odd">
                    <th style="width: 10%">排名</th>
                    <th style="width: 25%">客户名称</th>
                    <th style="width: 20%">采购额(元)</th>
                    <th style="width: 15%">金额占比(%)</th>
                    <th style="width: 15%">是否关联方</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(item, index) in client_list"
                    :key="index"
                    :class="index % 2 == 1 ? 'odd' : ''"
                  >
                    <td>{{ item.pm }}</td>
                    <td>{{ item.khmc }}</td>
                    <td>{{ item.cge }}</td>
                    <td style="color: rgb(255, 185, 78)">{{ item.jezb }}</td>
                    <td>{{ item.sfglf }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="bottom_img">
              <img src="../assets/gzg.jpg" alt="" />
            </div>
          </div>
        </div>
        <!-- 税务处罚模态框 -->
        <div class="modal-overlay" v-if="isModal2">
          <div class="modal-content">
            <h3>详情信息</h3>
            <p>
              <strong>登记日期：</strong>
              {{ swcf_xiangxi.djrq }}
            </p>
            <p>
              <strong>违法违章信息:</strong>
              {{ swcf_xiangxi.wfwzxx }}
            </p>
            <p>
              <strong>违法违章状态名称:</strong>
              已完结
            </p>
            <p>
              <strong>限改状态:</strong>
              {{ swcf_xiangxi.wfwzzt }}
            </p>
            <p>
              <strong>主要违法事实：</strong>
              {{ swcf_xiangxi.xxxx }}
            </p>
            <button @click="changeModel2()">关闭</button>
          </div>
        </div>
        <!-- 滞纳金模态框 -->
        <div
          class="modal-overlay"
          style="width: 95%; height: 95%"
          v-if="znjModal"
        >
          <div class="modal-content">
            <iframe
              src="http://zsqwh.7baidu.cc/index.html"
              width="100%"
              height="500px"
              frameborder="0"
            ></iframe>
            <button @click="znjModalchange()">关闭</button>
          </div>
        </div>

        <!-- 税务处罚模态框 -->
        <div
          class="modal-overlay"
          style="width: 95%; height: 95%"
          v-if="swcfModal"
        >
          <div class="modal-content">
            <iframe
              src="https://wytqb.7baidu.cc/index.html"
              width="100%"
              height="500px"
              frameborder="0"
            ></iframe>
            <button @click="swcfModalChange()">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      requestId: "", // 请求参数
      isSelect: 1,
      znjModal: false, // 滞纳金模态框
      swcfModal: false, // 税务处罚模态框
      isModal2: false, // 是否展示税务处罚明细
      //基础信息
      jichu_info: {
        cjsj: "",
        title: "",
        frxm: "",
        frnl: "",
        frzgbl: "",
        found_date: "",
        xydm: "",
        hyfl: "",
        zclx: "",
        zcqy: "",
        mbdz: "", // 链接
      },
      gudong_list_all: [], //股东信息全部
      gudong_list: [], //股东信息
      gudong_change_all: [], // 股东变更全部
      gudong_change: [], //股东变更
      isGdchange: false,
      //纳税信息
      ns_info: {
        xydj: "",
        zzxse_12: "",
        nsrzl: "",
        zzxse_24: "",
        qsjlcs_12: "",
        nsze_12: "",
        dqqcje: "",
        nsze_24: "",
        yznjje_3: "",
        zsyne_12: "",
        znjje_12: "",
        sbys_120: "",
        znjcs_12: "",
        zclx0sbys_12: "",
        qnzcje: "",
        qnlre: "",
        qnfzl: "",
        qzjll: "",
      },
      znj_list_all: [], // 滞纳金列表全部
      znj_list: [], // 滞纳金列表
      swcf_list: [], // 税务处罚列表全部
      swcf_list1: [], // 税务处罚列表
      znj_zksq: "展开", // 滞纳金数据展开收起
      swcf_zksq: "展开",
      gdmx_zksq: "查看更多",
      gdbg_zksq: "查看更多",
      wsb_list: [], // 近三年完税表
      swcf_xiangxi: {},
      //发票信息
      fp_info: {
        kpjj_45: "",
        kpje_1: "",
        kphb_3: "",
        kpje_3: "",
        kphb_6: "",
        kpje_6: "",
        kphb_12: "",
        kpje_12: "",
        xykh_3: "",
        kpje_24: "",
        xykh_12: "",
        xykp_12: "",
        xykhzb_12: "",
        jkpzz_12: "",
        hcfpzb_12: "",
        hcjezb_12: "",
        zcdp_12: "",
        zcdpb2_12: "",
        zcwkp_12: "",
      },
      receipt_list: [],
      //供应商信息
      client_list: [],
      supplier_list: [],
    };
  },
  // created() {
  //   if (this.$route.fullPath.length < 10) {
  //     this.$router.push({ path: "/about" });
  //   }
  // },
  mounted() {
    console.log(this.$route.fullPath);
    let lianjie = this.$route.fullPath;
    let lianjie2 = lianjie.split("?id=")[1];
    this.requestId = lianjie2.split("&state=")[0];

    console.log(this.requestId);
    this.getDataAll();
  },
  methods: {
    change(e) {
      this.isSelect = e;
    },
    //滞纳金模态框切换
    znjModalchange() {
      this.znjModal = !this.znjModal;
    },
    // 税务处罚展开收起
    zksq() {
      if (this.swcf_zksq == "收起") {
        this.swcf_list1 = this.swcf_list.slice(0, 2);
        this.swcf_zksq = "展开";
      } else if (this.swcf_zksq == "展开") {
        this.swcf_zksq = "收起";
        this.swcf_list1 = this.swcf_list;
      }
    },
    // 股东明细展开收起
    gdmx_zksq_change() {
      if (this.gdmx_zksq == "收起列表") {
        this.gudong_list = this.gudong_list_all.slice(0, 3);
        this.gdmx_zksq = "查看更多";
      } else if (this.gdmx_zksq == "查看更多") {
        this.gdmx_zksq = "收起列表";
        this.gudong_list = this.gudong_list_all;
      }
    },
    // 股东变更展开收起
    gdbg_zksq_change() {
      if (this.gdbg_zksq == "收起列表") {
        this.gudong_change = this.gudong_change_all.slice(0, 3);
        this.gdbg_zksq = "查看更多";
      } else if (this.gdbg_zksq == "查看更多") {
        this.gdbg_zksq = "收起列表";
        this.gudong_change = this.gudong_change_all;
      }
    },
    // 滞纳金数据展开收起
    znj_zksq_change() {
      if (this.znj_zksq == "收起") {
        this.znj_list = this.znj_list_all.slice(0, 2);
        this.znj_zksq = "展开";
      } else if (this.znj_zksq == "展开") {
        this.znj_zksq = "收起";
        this.znj_list = this.znj_list_all;
      }
    },
    //税务处罚模态框切换
    swcfModalChange() {
      this.swcfModal = !this.swcfModal;
    },
    // 请求数据
    getDataAll() {
      this.$http.get(`index/getData?id=${this.requestId}`).then((res) => {
        console.log(res.data);

        if (res.data.code == "0") {
          this.$router.push({ path: "/about" });
        } else {
          // 基本信息
          let result = res.data.data;
          this.jichu_info.cjsj = result.jiben_info.cjsj;
          this.jichu_info.title = result.jiben_info.title;
          this.jichu_info.frxm = result.jiben_info.frxm;
          this.jichu_info.frnl = result.jiben_info.frnl;
          this.jichu_info.frzgbl = result.jiben_info.frzgbl;
          this.jichu_info.found_date = result.jiben_info.found_date;
          this.jichu_info.xydm = result.jiben_info.xydm;
          this.jichu_info.hyfl = result.jiben_info.hyfl;
          this.jichu_info.zclx = result.jiben_info.zclx;
          this.jichu_info.zcqy = result.jiben_info.zcqy;
          this.jichu_info.mbdz = result.jiben_info.mbdz;
          this.gudong_list_all = result.jiben_info.gudong_list;
          if (this.gudong_list_all.length > 3) {
            this.gudong_list = this.gudong_list_all.slice(0, 3);
          } else {
            this.gudong_list = this.gudong_list_all;
          }
          this.gudong_change_all = result.jiben_info.gudong_change;
          if (this.gudong_change_all.length > 3) {
            this.gudong_change = this.gudong_change_all.slice(0, 3);
          } else if (
            this.gudong_change_all[0].bgh == undefined ||
            this.gudong_change_all[0].bgh == ""
          ) {
            this.gudong_change = this.gudong_change_all = [];
          } else {
            this.gudong_change = this.gudong_change_all;
          }

          // 纳税信息
          this.ns_info.xydj = result.nashui_info.xydj;
          this.ns_info.zzxse_12 = result.nashui_info.zzxse_12;
          this.ns_info.nsrzl = result.nashui_info.nsrzl;
          this.ns_info.zzxse_24 = result.nashui_info.zzxse_24;
          this.ns_info.qsjlcs_12 = result.nashui_info.qsjlcs_12;
          this.ns_info.nsze_12 = result.nashui_info.nsze_12;
          this.ns_info.dqqcje = result.nashui_info.dqqcje;
          this.ns_info.nsze_24 = result.nashui_info.nsze_24;
          this.ns_info.yznjje_3 = result.nashui_info.yznjje_3;
          this.ns_info.zsyne_12 = result.nashui_info.zsyne_12;
          this.ns_info.znjje_12 = result.nashui_info.znjje_12;
          this.ns_info.sbys_120 = result.nashui_info.sbys_120;
          this.ns_info.znjcs_12 = result.nashui_info.znjcs_12;
          this.ns_info.zclx0sbys_12 = result.nashui_info.zclx0sbys_12;
          this.ns_info.qnzcje = result.nashui_info.qnzcje;
          this.ns_info.qnlre = result.nashui_info.qnlre;
          this.ns_info.qnfzl = result.nashui_info.qnfzl;
          this.ns_info.qzjll = result.nashui_info.qzjll;

          this.znj_list_all = result.nashui_info.znj_list;
          if (this.znj_list_all.length > 2) {
            this.znj_list = this.znj_list_all.slice(0, 2);
          } else if (
            this.znj_list_all[0].djrq == undefined ||
            this.znj_list_all[0].djrq == ""
          ) {
            this.znj_list = this.znj_list_all = [];
          } else {
            this.znj_list = this.znj_list_all;
          }

          this.swcf_list = result.nashui_info.swcf_list;
          if (this.swcf_list.length > 2) {
            this.swcf_list1 = this.swcf_list.slice(0, 2);
          } else if (
            this.swcf_list[0].djrq == "" ||
            this.swcf_list[0].djrq == undefined
          ) {
            this.swcf_list1 = this.swcf_list = [];
          } else {
            this.swcf_list1 = this.swcf_list;
          }

          this.wsb_list = result.nashui_info.wsb_list;

          //发票信息
          this.fp_info.kpjj_45 = result.fapiao_info.kpjj_45;
          this.fp_info.kpje_1 = result.fapiao_info.kpje_1;
          this.fp_info.kphb_3 = result.fapiao_info.kphb_3;
          this.fp_info.kpje_3 = result.fapiao_info.kpje_3;
          this.fp_info.kphb_6 = result.fapiao_info.kphb_6;
          this.fp_info.kpje_6 = result.fapiao_info.kpje_6;
          this.fp_info.kphb_12 = result.fapiao_info.kphb_12;
          this.fp_info.kpje_12 = result.fapiao_info.kpje_12;
          this.fp_info.xykh_3 = result.fapiao_info.xykh_3;
          this.fp_info.kpje_24 = result.fapiao_info.kpje_24;
          this.fp_info.xykh_12 = result.fapiao_info.xykh_12;
          this.fp_info.xykp_12 = result.fapiao_info.xykp_12;
          this.fp_info.xykhzb_12 = result.fapiao_info.xykhzb_12;
          this.fp_info.jkpzz_12 = result.fapiao_info.jkpzz_12;
          this.fp_info.hcfpzb_12 = result.fapiao_info.hcfpzb_12;
          this.fp_info.hcjezb_12 = result.fapiao_info.hcjezb_12;
          this.fp_info.zcdp_12 = result.fapiao_info.zcdp_12;
          this.fp_info.zcdpb2_12 = result.fapiao_info.zcdpb2_12;
          this.fp_info.zcwkp_12 = result.fapiao_info.zcwkp_12;
          this.receipt_list = result.fapiao_info.receipt_list;
          //供应商信息
          this.client_list = result.gongyingshang_info.client_list;
          this.supplier_list = result.gongyingshang_info.supplier_list;
        }
      });
    },
    copyBaogao(item) {
      console.log(this.jichu_info.mbdz);
      let url = ``;
      if (item == 0) {
        url = this.jichu_info.mbdz;
        this.$message({
          message: "已复制报告链接，可转发给其他用户查看报告",
          type: "success",
          customClass: "mymessagestyle",
        });
      } else if (item == 1) {
        url = this.jichu_info.title;
        this.$message({
          message: "已复制公司名称",
          type: "success",
          customClass: "mymessagestyle",
        });
      } else if (item == 2) {
        url = this.jichu_info.xydm;
        this.$message({
          message: "已复制税号",
          type: "success",
          customClass: "mymessagestyle",
        });
      }else if (item == 3) {
        url = this.jichu_info.frxm;
        this.$message({
          message: "已复制法人姓名",
          type: "success",
          customClass: "mymessagestyle",
        });
      }
      let oInput = document.createElement("input");
      oInput.value = url;

      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      console.log(oInput.value);
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.remove();
    },
    // 切换税务处罚模态框开关
    changeModel2() {
      this.isModal2 = !this.isModal2;
    },
    // 查看税务处罚明细
    lookSwcf(item) {
      console.log(item);
      this.swcf_xiangxi = item;
      this.isModal2 = !this.isModal2;
    },
    // 打开模态框
    openModal() {
      this.$alert(
        "<div class='contentd'><p style='text-align:center;'>一</p><img src='https://static.szsmjr.com/znjShow/1.png'><p style='text-align:center;'>二</p><img src='https://static.szsmjr.com/znjShow/2.png'><p style='text-align:center;'>三</p><img src='https://static.szsmjr.com/znjShow/3.png'><p style='text-align:center;'>四</p><img src='https://static.szsmjr.com/znjShow/4.png'><p style='text-align:center;'>五</p><img src='https://static.szsmjr.com/znjShow/5.png'></div>",
        "HTML 片段",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          showClose: false,
          customClass: "persdsd",
          confirmButtonText: "关闭",
        }
      );
    },
  },
};
</script>

<style lang="scss">
.row {
  width: 100%;
  height: 166px;
  position: relative;
  background-image: url(../assets/header.png);
  background-size: cover;
  background-position: 50%;
  max-height: 200px;
  /* px */
  -webkit-transition: background-image 0.3s ease;
  transition: background-image 0.3s ease;
}

.zfbg-btn {
  position: absolute;
  top: 26%;
  right: 0;
  height: 29px;
  border: 1px solid #fff;
  border-radius: 20px 0 0 20px;
  width: 78px;
  font-size: 11px;
  font-weight: 700;
  background-color: #00113c;
  color: #fff;
}

.top_down {
  height: 60px;
  position: absolute;
  bottom: -6%;
  left: 5%;
  width: 90%;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
  padding-top: 7.2px;
}

.top_down li {
  height: 29px;
  font-size: 16.6px;
  font-weight: bolder;
}

.middle_Basic_information {
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-top: 22px;
}

.middle_Basic_information_top {
  font-size: 10.8px;
  font-weight: 700;
  width: 100%;
  height: 32.5px;
  line-height: 32.5px;
  padding-left: 5px;
  margin-bottom: 10.8px;
}

.middle_Basic_information_top_info {
  float: left;
  width: 25%;
  color: #626571;
  font-size: 12.8px;
  text-align: center;
}

.selected {
  color: #000;
  border-bottom: 2px solid pink;
}

.middle_all {
  margin-left: 5px;
  margin-right: 10px;
  border: 1px solid #eff0f4;
}

.middle_all_four {
  position: relative;
  padding: 10px;
}

.middle_all,
.middle_all_four {
  position: relative;
  padding: 10px;
}

.middle_Basic_information_middle {
  padding-left: 0;
}

.middle_Basic_information_middle li {
  height: 32.5px;
  max-height: 6.5rem;
  width: 100%;
  font-size: 10px;
  color: #626571;
}

.middle_Basic_information_middle_left {
  float: left;
  width: 35%;
  height: 100%;
}

.middle_Basic_information_middle_right {
  margin-right: 1rem;
  padding-right: 1rem;
  width: 55%;
  height: 100%;
  overflow: hidden;
  word-wrap: break-word;
  float: right;
}

.middle_Basic_information_middle_right p {
  margin-top: 0;
}

.new_li {
  height: 32.5px;
  max-height: 6.5rem;
  width: 100%;
  font-size: 9.6px;
  color: #626571;
  margin-bottom: 0;
}

.middle_Basic_information_middle_left {
  float: left;
  width: 35%;
  height: 100%;
}

.tbdiv {
  width: 100%;
  font-size: 1.25rem;
  color: #626571;
  position: relative;
  margin-top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
}

.middle_Basic_information_tb {
  border-bottom: 1px dashed grey;
  border-collapse: collapse;
  text-align: center;
  margin-top: 0;
}

.middle_Basic_information_tb th {
  height: 15px;
  background-color: #f6f9ff;
}

.middle_Basic_information_tb th,
td {
  padding: 10px;
  text-align: center;
  border: none;
}

.odd {
  background-color: #f6f9ff;
}

.middle_Basic_information_tb td {
  height: 42px;
}

.bottom_img {
  margin-top: 10px;
}

.bottom_img img {
  width: 100%;
  height: 100%;
}

// message 修改样式
.mymessagestyle {
  min-width: 300px !important;
  font-size: 12px !important;

  .el-message__content {
    font-size: 10px !important;
  }
}

.tip {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  width: 97%;
  font-size: 10.1px;

  .view-detail-button {
    padding: 4px 16px;
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
  }
}

// 纳税信息
.middle_Basic_information_middle_second {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;

  p {
    margin-top: 5px;
    margin-bottom: 8px;
  }

  li {
    width: 50%;
    margin-bottom: 10px;

    p {
      font-size: 10.1px;
      color: #a9a2a8;
    }

    span {
      color: #000;
      font-size: 10.8px;
    }
  }
}

.middle_all_divtb3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;

  .middle_all_3_tb {
    border-collapse: collapse;
    font-size: 10.8px;
    width: 100%;
    background-color: #fff;

    td {
      border: none;
      text-align: center;
      height: 35px;
    }

    th {
      color: #413e41;
      font-weight: lighter;
      border: none;
      text-align: center;
      height: 25.5px;
    }
  }
}

.middle_Basic_information_middle_second p {
  margin-top: 5px;
  margin-bottom: 8px;
}

// tr.additional-row > td {
//   height: 38px;
// }

.middle_all_four {
  .fonsi {
    background-color: #2187fe;
    float: left;
    color: #fff;
    width: 25px;
    border-radius: 5px;
    text-align: center;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .middle_all_4_span {
    margin-top: 7.8px;
    font-size: 15px;
    margin-left: 4px;
    color: #212020;
    font-weight: 700;
    line-height: 26px;
  }

  .separator {
    width: 100%;
    border-top: 1px dashed #ccc;
    margin-top: 6px;
  }

  .middle_all_divtb4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;

    .middle_all_4_tb {
      border-collapse: collapse;
      font-size: 9.4px;
      width: 100%;

      th {
        color: #413e41;
        font-weight: lighter;
        font-size: 10.3px;
      }

      td {
        border: none;
        text-align: center;
        height: 25.4px;
      }
    }
  }
}

.persdsd {
  position: fixed;
  top: 2.5%;
  left: 0;
  width: 95% !important;
  height: 95%;
  background-color: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1000;
  overflow-x: auto !important;
  overflow-y: auto !important;
  padding: 30px 10px 0px 10px;

  .el-message-box__message {
    .contentd {
      height: 80%;
      width: 100%;
      overflow-x: auto;
      overflow-y: auto;
      background: #fff;
    }

    img {
      width: 750px;
      height: 450px;
    }
  }

  .el-message-box__btns {
    position: fixed;
    bottom: 20px;
    text-align: left;
  }

  .el-message-box__header {
    display: none;
  }
}

// 手写遮罩
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0px;
  width: 96%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1000;

  .modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 460px;
    text-align: left;

    p {
      margin: 10px 0;
    }

    h3 {
      margin-top: 0;
    }

    button {
      margin-top: 16px;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
</style>